<template>
  <el-row>
    <el-col
      class="p-3 mt-3 h-80"
      :xs="24"
      :sm="12"
      :md="8"
      :lg="6"
      :xl="6"
      v-for="chart in allChart"
      :key="chart.name"
    >
      <div class="w-full h-80 chart-item border rounded-md shadow-md">
        <component :is="chart.component"></component>
      </div>
    </el-col>
  </el-row>
</template>

<script name="BasicChart" lang="ts" setup>
import * as AllChart from '@/components/Chart/index';

const allChart = computed(() => {
  return Object.entries(AllChart).map((icon) => {
    return {
      name: icon[0],
      component: icon[1]
    };
  });
});
</script>
